<template>
	<view class="">
		<view class="group_banner">
			<image src="../../static/image/mine/index/groupbooking01.png" mode=""></image>
			<view class="title">
				精选拼团
			</view>
		</view>
		<view class="pro_list">
			<view class="list" 
			@tap="toproductdetail(index)"
			v-for="(item,index) in group_pro">
				<image :src="item.pic" mode=""></image>
				<view class="list_info">
					<view class="list_info_title">
						{{item.title}}
					</view>
					<view class="list_info_groupnum">
						<image src="../../static/image/mine/index/grouplogo.png" mode=""></image>
						{{item.groupnum}}人团
					</view>
					<view class="list_info_residueday">
						距离结束：{{item.residueday}}天
					</view>
					<view class="list_info_price">
						￥{{item.price}} <text>￥{{item.line_throu}}</text>
					</view>
					<view class="togroup">
						去拼团
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				group_pro:[
					{	
						pic: '../../static/image/mine/index/groupbooking02.png',
						title: '童装男童冬装加厚棉衣外套2019新款大童棉服儿童男孩短款棉袄潮',
						groupnum: 2,
						residueday: 2,
						price: '199.00',
						line_throu: '166.33'
					},
					{	
						pic: '../../static/image/mine/index/groupbooking03.png',
						title: '童装男童冬装加厚棉衣外套2019新款大童棉服儿童男孩短款棉袄潮',
						groupnum: 3,
						residueday: 2,
						price: '199.00',
						line_throu: '166.33'
					},
					{
						pic: '../../static/image/mine/index/groupbooking04.png',
						title: '童装男童冬装加厚棉衣外套2019新款大童棉服儿童男孩短款棉袄潮',
						groupnum: 4,
						residueday: 2,
						price: '199.00',
						line_throu: '166.33'
					},
					{
						pic: '../../static/image/mine/index/groupbooking03.png',
						title: '童装男童冬装加厚棉衣外套2019新款大童棉服儿童男孩短款棉袄潮',
						groupnum: 3,
						residueday: 1,
						price: '199.00',
						line_throu: '166.33'
					},
				]
			}
		},
		methods: {
			toproductdetail (index) {
				uni.navigateTo({
					url: '/pageB/classify/productdetail?id='+index + '&type=' + '3'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.group_banner {
		width: 100%;
		height: 355upx;
		position: relative;
		image {
			width: 100%;
			height: 100%;
		}
		.title {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 84upx;
			background-color: #FFFFFF;
			border-top-left-radius: 30upx;
			border-top-right-radius: 30upx;
			padding: 0 15upx;
			box-sizing: border-box;
			font-size: 32upx;
			color: #333333;
			line-height: 84upx;
		}
	}
	.pro_list {
		width: 100%;
		background-color: #FFFFFF;
		padding: 0 15upx;
		box-sizing: border-box;
		overflow: hidden;
		.list {
			width: 100%;
			height: 220upx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20upx;
		}
		image {
			width: 220upx;
			height: 220upx;
			border-radius: 10upx;
		}
		.list_info {
			width: 470upx;
			height: 220upx;
			position: relative;
			.list_info_title {
				font-size: 28upx;
				color: #333333;
				line-height: 40upx;
				height: 80upx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.list_info_groupnum {
				margin-top: 20upx;
				height: 28upx;
				image {
					vertical-align: sub;
					width: 24upx;
					height: 28upx;
					margin-right: 8upx;
				}
				font-size: 24upx;
				color: #f73e2f;
				line-height: 28upx;
			}
			.list_info_residueday {
				font-size: 24upx;
				color: #333333;
				line-height: 52upx;
			}
			.list_info_price {
				font-size: 28upx;
				color: #f73e2f;
				text {
					margin-left: 10upx;
					font-size: 24upx;
					color: #999999;
					text-decoration: line-through;
				}
			}
			.togroup {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 145upx;
				height: 52upx;
				border-radius: 26upx;
				background: linear-gradient(to right,#f73e2f 0%,#fc5c2f 100%);
				font-size: 24upx;
				color: #FFFFFF;
				text-align: center;
				line-height: 52upx;
			}
		}
	}
</style>
